<!-- 小组页面首页 -->
<template>
  <div class="group-index">
        
    <el-card shadow="always" :body-style="	{ padding: '0px' }" class="group-hoster">
      <div class="hoster" v-for="item in hosters" :key="item.name">
        
         <el-popover placement="right-start" width="300px" trigger="hover"  style="border-shadow:5px 5px 5px 5px #eee; margin:0; padding:0;">
              <author-card></author-card>
              <a href="#" slot="reference">
               <img :src="item.src" alt="" width="100px">
              </a>
            </el-popover>
        <div class="intro">
            <span id="name">{{item.title}}:{{item.name}}</span><br>
            <span id="sign">个性签名：</span><br>
            <span id="sign-con">{{item.sign}}</span>
        </div>
      </div>
    </el-card>
    <div class="group-content">
        <group-card v-for="item in 5" :key="item" style="margin-bottom:50px;"></group-card>
    </div>
  </div>
</template>

<script>
import GroupCard from '@/subcomponents/conCard.vue'
import AuthorCard from '../photoInfo/authorCard.vue'
export default {
  data () {
    return {
        hosters:[
            {
                name: 'ice',
                src: require("../../images/1.png"),
                title: '组长',
                sign: '我为自己代言'

            },
                   {
                name: '子帅',
                src: require("../../images/2.png"),
                title: '管理员',
                sign: '加油加油！'

            }
        ]
    };
  },
  components:{
      GroupCard,
      AuthorCard
  },

  methods: {}
}

</script>
<style lang='scss' scoped>
.group-index{
  margin-bottom: 100px;
  display: flex;
  justify-content: flex-start;
  .group-hoster{
      width: 25%;
      height:400px;
      padding:30px 20px;
      .hoster{
          display: flex;
          justify-content: flex-start;
          height:150px;
          align-items: center;
          padding-left:10px;
          margin:10px auto;
          border:1px solid;
          img{
              box-shadow: 1px 1px 1px 2px #eee;
              height:120px;
              margin-right:10px;
          }
              .intro{
                  #name{
                          line-height: 40px;
    font-size: 16px;
    letter-spacing: 5px;
                  }
                  #sign{
                          line-height: 40px;
    font-size: 16px;
    letter-spacing: 5px;
                  }
                  #sign-con{
                          line-height: 40px;
    font-size: 16px;
    letter-spacing: 5px;
                  }
              }
          

      }
  }
  .group-content{
      margin-left:20px;
      width: 55%;

  }
}
</style>